<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		*{
			margin: 0px;
			padding: 0px;
		}
		body{
			background-color: aliceblue;
		}
		.fl {
			 float: left;
		}
		.fr {
			 float: right;
		}
		.clean {
			 clear: both;
		}
		.container {
			 width: 730px;
			 margin: 0px auto;
		}
		.pic-box ul {
			border: 2px dashed skyblue;
			/* 去掉小圆点 */
			list-style-type: none;
		}
		.pic-box img {
			width: 200px;
			height: 200px;
		}
		.pic-box p{
			position: absolute;
			bottom: 30px;
			color: white;
			/* 文字居中 */
			text-align: center;
		}
		.pic-box ul li {
			/* 相对定位 */
			position: relative;
			 border: 1px dotted darkblue;
			 padding: 10px;
			 margin: 10px;
		}
		/* 移动 */
		.pic-box ul li:hover {
			position: relative;
			left: 2px;
			top: -2px;
		}
		.jump-top {
			width: 100px;
			height: 30px;
			/* 固定定位，使回到顶点一直固定而不随滚动条的移动而移动 */
			position: fixed;
			/* 设置距离右边和下边父类的距离 */
			right: 20px;
			bottom: 20px;
			background-color: white;
			/* 文字居中 */
			text-align: center;
		}
		.jump-top a:link {
			color: blue;
		}
		.jump-top a:hover {
			color: aqua;
		}
		.jump-top a:visited {
			color: blue;
		}</style>
	</head>
	<body>
		<div class="pic-box">
			<div class="container">
				<ul>
					<li class="fl">
						<img src="../img/01.jpg"/>
						<p>风景1</p>
					</li>
					<li class="fl">
						<img src="../img/02.jpg"/>
						<p>风景2</p>
					</li>
					<li class="fl">
						<img src="../img/03.jpg"/>
						<p>风景3</p>
					</li>
					<li class="fl">
						<img src="../img/04.jpg"/>
						<p>风景4</p>
					</li>
					<li class="fl">
						<img src="../img/05.jpg"/>
						<p>风景5</p>
					</li>
					<li class="fl">
						<img src="../img/06.jpg"/>
						<p>风景6</p>
					</li>
					
					<div class="clean"></div>
				</ul>
			</div>
			<div class="jump-top">
				<a href="#">回到顶部</a>
			</div>
		</div>
	</body>
</html>
